<!DOCTYPE html>
<html class="no-js">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Form - Rainbow</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="../static/libs/vue/vue.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/rainbow-nash@0.1.17/dist/rainbow-nash.css">
    <script src="https://unpkg.com/rainbow-nash@0.1.17/dist/rainbow-nash.umd.min.js"></script>
    <link rel="stylesheet" href="../static/libs/highlight/highlight@9.12.0.min.css">
    <link rel="stylesheet" href="../static/libs/highlight/vs.min.css">
    <script src="../static/libs/highlight/highlight@9.12.0.min.js"></script>
    <style>
      [v-cloak] {
        display: none;
      }
      .demo-header{
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: flex-end;
      }
      .code-font{
        font-family: Consolas,Menlo,Courier,monospace;
      }
      .demo-header h1{
        margin-right: auto;
        font-family: Consolas,Menlo,Courier,monospace;
        font-size: 42px;
      }
      .demo-header h1 span{
        font-size: 60px;
        transform: rotate(7deg);
      }
      pre code{
        font-family: Consolas,Menlo,Courier,monospace;
        line-height: 2;
      }
      pre textarea{
        display: none;
      }
      .hljs{
        background-color: #f7f7f7;
      }
      .hljs-name, .hljs-keyword{
        color: #6089ec;
        font-weight: normal;
      }
      
      .anchor{
        margin-top: 30px;
      }
      .anchor h2, .anchor h3{
        margin-bottom: 10px;
      }
      
      .margin-top-10{
        margin-top: 10px;
      }
      
      .api table{
        font-family: Consolas,Menlo,Courier,monospace;
      }
      .api table th{
        white-space: nowrap;
      }
      
      
    </style>
  </head>
  <body>
    <r-app id="app" v-cloak>
      <div slot="header" align-items="center" class="demo-header">
        <h1 style="color: #f4615c"> <span>R</span><i>ainbow.Doc</i></h1>
        <r-icon type="paper-airplane"></r-icon>
        <r-dropdown label="木已成鲨鱼" style="margin-left: 4px">
          <r-dropdown-item>个人信息</r-dropdown-item>
          <r-dropdown-item>登出</r-dropdown-item>
        </r-dropdown>
      </div>
      <r-menu slot="aside" mode="vertical" v-model="common.activeMenu" expand>
        <r-menu-item name="1" href="start.html">快速上手</r-menu-item>
        <r-sub-menu name="2">
          <template slot="title">Basic</template>
          <r-menu-item name="2-1" href="grid.html">
            <r-icon type="ios-grid-view-outline"></r-icon>Grid 栅格
          </r-menu-item>
          <r-menu-item name="2-2" href="app.html">
            <r-icon type="ios-browsers-outline"></r-icon>App 布局
          </r-menu-item>
          <r-menu-item name="2-3" href="button.html">
            <r-icon type="social-youtube-outline"></r-icon>Button 按钮
          </r-menu-item>
          <r-menu-item name="2-4" href="icon.html">
            <r-icon type="ios-heart-outline"></r-icon>Icon 图标
          </r-menu-item>
        </r-sub-menu>
        <r-sub-menu name="3">
          <template slot="title">Form</template>
          <r-menu-item name="3-1" href="input.html">
            <r-icon type="ios-compose-outline"></r-icon>Input 输入框
          </r-menu-item>
          <r-menu-item name="3-2" href="radio.html">
            <r-icon type="ios-circle-filled"></r-icon>Radio 单选框
          </r-menu-item>
          <r-menu-item name="3-3" href="checkbox.html">
            <r-icon type="android-checkbox-outline"></r-icon>Checkbox 多选框
          </r-menu-item>
          <r-menu-item name="3-4" href="table.html">
            <r-icon type="ios-grid-view"></r-icon>Table 表格
          </r-menu-item>
          <r-menu-item name="3-5" href="select.html">
            <r-icon type="ios-arrow-down"></r-icon>Select 选择器
          </r-menu-item>
          <r-menu-item name="3-6" href="datepicker.html">
            <r-icon type="ios-calendar-outline"></r-icon>DatePicker 日期选择器
          </r-menu-item>
          <r-menu-item name="3-7" href="timepicker.html">
            <r-icon type="ios-clock-outline"></r-icon>TimePicker 时间选择器
          </r-menu-item>
          <r-menu-item name="3-8" href="upload.html">
            <r-icon type="ios-cloud-upload-outline"></r-icon>Upload 上传
          </r-menu-item>
          <r-menu-item name="3-9" href="form.html">
            <r-icon type="ios-list-outline"></r-icon>Form 表单
          </r-menu-item>
        </r-sub-menu>
        <r-sub-menu name="4">
          <template slot="title">View</template>
          <r-menu-item name="4-1" href="card.html">
            <r-icon type="ios-browsers-outline"></r-icon>Card 卡片
          </r-menu-item>
          <r-menu-item name="4-2" href="message.html">
            <r-icon type="ios-information-outline"></r-icon>Message 全局提示
          </r-menu-item>
          <r-menu-item name="4-3" href="modal.html">
            <r-icon type="ios-chatbubble-outline"></r-icon>Modal 对话框
          </r-menu-item>
          <r-menu-item name="4-4" href="progress.html">
            <r-icon type="android-remove"></r-icon>Progress 进度条
          </r-menu-item>
          <r-menu-item name="4-5" href="timeline.html">
            <r-icon type="android-more-vertical"></r-icon>Timeline 时间轴
          </r-menu-item>
          <r-menu-item name="4-6" href="tag.html">
            <r-icon type="ios-pricetags-outline"></r-icon>Tag 标签
          </r-menu-item>
          <r-menu-item name="4-7" href="tooltip.html">
            <r-icon type="chatbox-working"></r-icon>Tooltip 文字提示
          </r-menu-item>
          <r-menu-item name="4-8" href="tree.html">
            <r-icon type="network"></r-icon>Tree 树形控件
          </r-menu-item>
          <r-menu-item name="4-9" href="breadcrumb.html">
            <r-icon type="aperture"></r-icon>Breadcrumb 面包屑
          </r-menu-item>
          <r-menu-item name="4-10" href="alert.html">
            <r-icon type="android-alert"></r-icon>Alert 警告
          </r-menu-item>
        </r-sub-menu>
        <r-sub-menu name="5">
          <template slot="title">Navigation</template>
          <r-menu-item name="5-1" href="menu.html">
            <r-icon type="navicon-round"></r-icon>Menu 导航菜单
          </r-menu-item>
          <r-menu-item name="5-2" href="tabs.html">
            <r-icon type="social-windows-outline"></r-icon>Tabs 标签页
          </r-menu-item>
          <r-menu-item name="5-3" href="dropdown.html">
            <r-icon type="arrow-down-b"></r-icon>Dropdown 下拉菜单
          </r-menu-item>
          <r-menu-item name="5-4" href="page.html">
            <r-icon type="ios-book-outline"></r-icon>Page 分页
          </r-menu-item>
        </r-sub-menu>
      </r-menu>
      <div slot="main">
        <h1>Form 表单</h1>
        <div class="anchor">
          <h2 id="概述"></h2>
        </div>
        <div class="anchor">
          <h3>Form inline</h3>
        </div>
        <r-card>
          <r-tabs v-model="common.tab">
            <r-tab-pane name="1" label="示例">
              <r-form inline>
                <r-form-item label="用户名">
                  <r-input></r-input>
                </r-form-item>
                <r-form-item label="密码">
                  <r-input type="password"></r-input>
                </r-form-item>
                <r-form-item>
                  <r-button type="primary">确认</r-button>
                </r-form-item>
              </r-form>
            </r-tab-pane>
            <r-tab-pane name="2" label="代码">
              <pre><code class="html"></code>
                <textarea v-pre><r-form inline>
  <r-form-item label="用户名">
    <r-input></r-input>
  </r-form-item>
  <r-form-item label="密码">
    <r-input type="password"></r-input>
  </r-form-item>
  <r-form-item>
    <r-button type="primary">确认</r-button>
  </r-form-item>
</r-form>

                </textarea></pre>
            </r-tab-pane>
          </r-tabs>
        </r-card>
        <div class="anchor">
          <h3>Form</h3>
        </div>
        <r-card>
          <r-tabs v-model="common.tab2">
            <r-tab-pane name="1" label="示例">
              <r-form label-width="100" :model="formItem" :rules="ruleValidate" ref="myForm">
                <r-form-item label="输入框" prop="input" required>
                  <r-input v-model="formItem.input" placeholder="请输入" trim> </r-input>
                </r-form-item>
                <r-form-item label="选择器" prop="select">
                  <r-select v-model="formItem.select" clearable>
                    <r-select-option label="北京市" value="0"></r-select-option>
                    <r-select-option label="上海市" value="1"></r-select-option>
                    <r-select-option label="深圳市" value="2"></r-select-option>
                  </r-select>
                </r-form-item>
                <r-form-item label="日期控件">
                  <div style="display:flex; align-items:baseline">
                    <r-form-item prop="date">
                      <r-datepicker v-model="formItem.date" clearable></r-datepicker>
                    </r-form-item><span style="flex-basis:50px;text-align:center">-</span>
                    <r-form-item prop="time">
                      <r-timepicker v-model="formItem.time" clearable></r-timepicker>
                    </r-form-item>
                  </div>
                </r-form-item>
                <r-form-item label="单选框" prop="radio">
                  <r-radio-group v-model="formItem.radio">
                    <r-radio label="男" value="male"></r-radio>
                    <r-radio label="女" value="remale"></r-radio>
                  </r-radio-group>
                </r-form-item>
                <r-form-item label="多选框" prop="checkbox">
                  <r-checkbox-group v-model="formItem.checkbox">
                    <r-checkbox label="吃饭" value="吃饭"></r-checkbox>
                    <r-checkbox label="睡觉" value="睡觉"></r-checkbox>
                    <r-checkbox label="跑步" value="跑步"></r-checkbox>
                    <r-checkbox label="看电影" value="看电影"></r-checkbox>
                  </r-checkbox-group>
                </r-form-item>
                <r-form-item label="文本域">
                  <r-input v-model="formItem.textarea" type="textarea"></r-input>
                </r-form-item>
                <r-form-item label="异步验证" prop="ajaxValue" required>
                  <r-input v-model="formItem.ajaxValue" placeholder="请输入ajax" trim></r-input>
                </r-form-item>
                <r-form-item required v-for="(item, index) in formItem.tels.items" :key="index" :label="'电话' + (index + 1)" :prop="'tels.items[' + index + '].value'" :rules="[{validate: required, msg:'不能为空'}]">
                  <r-row>
                    <r-col>
                      <r-input v-model="item.value"></r-input>
                    </r-col>
                    <r-col offset="1">
                      <r-button type="danger" size="small" @click.native="delTel(item)">删除</r-button>
                    </r-col>
                  </r-row>
                </r-form-item>
                <r-form-item style="margin-left: 100px;">
                  <r-button type="primary" @click.native="addTel">添加电话</r-button>
                </r-form-item>
                <r-form-item prop="images" required label="上传图片">
                  <r-upload v-model="formItem.images" action="//jsonplaceholder.typicode.com/posts/" :on-success="onSuccess" list-type="image">
                    <r-button icon="ios-cloud-upload-outline">上传文件</r-button>
                  </r-upload>
                </r-form-item>
                <r-form-item style="margin-left: 100px;">
                  <r-button @click.native="reset">reset</r-button>
                  <r-button style="margin-left: 8px" type="primary" @click.native="submit">提交</r-button>
                </r-form-item>
              </r-form>
            </r-tab-pane>
            <r-tab-pane name="2" label="代码">
              <pre><code class="html"></code>
                <textarea v-pre><r-form label-width="100" :model="formItem" :rules="ruleValidate" ref="myForm">
  <r-form-item label="输入框" prop="input" required>
    <r-input v-model="formItem.input" placeholder="请输入" trim> </r-input>
  </r-form-item>
  <r-form-item label="选择器" prop="select">
    <r-select v-model="formItem.select" clearable>
      <r-select-option label="北京市" value="0"></r-select-option>
      <r-select-option label="上海市" value="1"></r-select-option>
      <r-select-option label="深圳市" value="2"></r-select-option>
    </r-select>
  </r-form-item>
  <r-form-item label="日期控件">
    <div style="display:flex; align-items:baseline">
      <r-form-item prop="date">
        <r-datepicker v-model="formItem.date" clearable></r-datepicker>
      </r-form-item><span style="flex-basis:50px;text-align:center">-</span>
      <r-form-item prop="time">
        <r-timepicker v-model="formItem.time" clearable></r-timepicker>
      </r-form-item>
    </div>
  </r-form-item>
  <r-form-item label="单选框" prop="radio">
    <r-radio-group v-model="formItem.radio">
      <r-radio label="男" value="male"></r-radio>
      <r-radio label="女" value="remale"></r-radio>
    </r-radio-group>
  </r-form-item>
  <r-form-item label="多选框" prop="checkbox">
    <r-checkbox-group v-model="formItem.checkbox">
      <r-checkbox label="吃饭" value="吃饭"></r-checkbox>
      <r-checkbox label="睡觉" value="睡觉"></r-checkbox>
      <r-checkbox label="跑步" value="跑步"></r-checkbox>
      <r-checkbox label="看电影" value="看电影"></r-checkbox>
    </r-checkbox-group>
  </r-form-item>
  <r-form-item label="文本域">
    <r-input v-model="formItem.textarea" type="textarea"></r-input>
  </r-form-item>
  <r-form-item label="异步验证" prop="ajaxValue" required>
    <r-input v-model="formItem.ajaxValue" placeholder="请输入ajax" trim></r-input>
  </r-form-item>
  <r-form-item required v-for="(item, index) in formItem.tels.items" :key="index" :label="'电话' + (index + 1)" 
  :prop="'tels.items[' + index + '].value'" :rules="[{validate: required, msg:'不能为空'}]">
    <r-row>
      <r-col>
        <r-input v-model="item.value"></r-input>
      </r-col>
      <r-col offset="1">
        <r-button type="danger" size="small" @click.native="delTel(item)">删除</r-button>
      </r-col>
    </r-row>
  </r-form-item>
  <r-form-item style="margin-left: 100px;">
    <r-button type="primary" @click.native="addTel">添加电话</r-button>
  </r-form-item>
  <r-form-item prop="images" required label="上传图片">
    <r-upload v-model="formItem.images" action="//jsonplaceholder.typicode.com/posts/" :on-success="onSuccess" list-type="image">
      <r-button icon="ios-cloud-upload-outline">上传文件</r-button>
    </r-upload>
  </r-form-item>
  <r-form-item style="margin-left: 100px;">
    <r-button @click.native="reset">reset</r-button>
    <r-button style="margin-left: 8px" type="primary" @click.native="submit">提交</r-button>
  </r-form-item>
</r-form>

<script>
exprot default {
  data () {
    return {
      formItem: {
      input: '',
      select: '',
      radio: '',
      checkbox: [],
      switch: true,
      date: '',
      time: '',
      textarea: '',
      tels: {
        items: [{value:''}]
      },
      ajaxValue: '',
      images: [],
    },
    ruleValidate: {
      input: [
        {
          validate: this.required,
          msg: '输入不能为空'
        },
        {
          validate: function (value, callback){
            if (/^\d+$/.test(value)){
              callback(true)
            }
            else {
              callback(false, '请输入数字')
            }
          }
        }
      ],
      select: [
        {
          validate: this.required,
          msg: '选择不能为空'
        }
      ],
      radio: [
        {
          validate: this.required,
          msg: 'radio不能为空'
        }
      ],
      checkbox: [
        {
          validate: this.required,
          msg: 'checkbox不能为空'
        }
      ],
      date: [
        {
          validate: this.required,
          msg: 'date不能为空'
        }
      ],
      time: [
        {
          validate: this.required,
          msg: 'time不能为空',
        }
      ],
      ajaxValue: [
        {
          validate (value, callback) {
            if (value.trim().length === 0){
              callback(false, '不能为空')
              return
            }

            setTimeout(_=>{
              if (value == 'ajax'){
                callback(true)
              }
              else {
                callback(false)
              }
            }, 1000)
          },
          msg: '远程验证失败',
          loadingMsg: '请求ing....',
        }
      ],
      images: [
        {
          validate: this.required,
          msg: '图片不能为空'
        }
      ]
    }
  }，
  methods: {
    required (value, callback) {
      if (value instanceof Array){
        if (value.length > 0){
          callback(true)
        }
        else {
          callback(false)
        }
      }
      else {
        if (value.length > 0){
          callback(true)
        }
        else {
          callback(false)
        }
      }
    },

    addTel () {
      this.formItem.tels.items.push({
        value: ''
      })
    },

    delTel (item) {
      var idx = this.formItem.tels.items.indexOf(item)
      this.formItem.tels.items.splice(idx, 1)
    },

    submit () {
      console.log(JSON.stringify(this.formItem))
      this.$refs.myForm.validate( (_, item)=>{
        console.log(_, item)
      })
    },

    reset () {
      this.$refs.myForm.reset()
    },

    onSuccess (res, file) {
      this.formItem.images.push({
        name: file.name,
        url: res.id
      })
    }
  }
}
</script>

                </textarea></pre>
            </r-tab-pane>
          </r-tabs>
        </r-card>
        <div class="anchor">
          <h2>Api</h2>
        </div>
        <div class="anchor">
          <h3>Form props</h3>
        </div>
        <div class="r-table r-table-border api">
          <table>
            <thead>
              <tr>
                <th>
                  <div>属性</div>
                </th>
                <th>
                  <div>说明</div>
                </th>
                <th>
                  <div>类型</div>
                </th>
                <th>
                  <div>默认值</div>
                </th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>
                  <div>label-width</div>
                </td>
                <td>
                  <div>标签宽度，所有 Form-item 都会继承此值 </div>
                </td>
                <td>
                  <div>Number | String</div>
                </td>
                <td>
                  <div>80</div>
                </td>
              </tr>
              <tr>
                <td>
                  <div>inline</div>
                </td>
                <td>
                  <div>是否开启行内表单模式</div>
                </td>
                <td>
                  <div>Boolean</div>
                </td>
                <td>
                  <div>false</div>
                </td>
              </tr>
              <tr>
                <td>
                  <div>model</div>
                </td>
                <td>
                  <div>表单数据对象</div>
                </td>
                <td>
                  <div>Object</div>
                </td>
                <td>
                  <div>-</div>
                </td>
              </tr>
              <tr>
                <td>
                  <div>rules</div>
                </td>
                <td>
                  <div>表单验证规则</div>
                </td>
                <td>
                  <div>Object</div>
                </td>
                <td>
                  <div>-</div>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
        <div class="anchor">
          <h3>Form methods</h3>
        </div>
        <div class="r-table r-table-border api">
          <table>
            <thead>
              <tr>
                <th>
                  <div>方法名</div>
                </th>
                <th>
                  <div>说明</div>
                </th>
                <th>
                  <div>参数</div>
                </th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>
                  <div>validate</div>
                </td>
                <td>
                  <div>对表单进行校验，参数为校验完的回调，回调里 true 表示成功， false 表示失败，如果失败则有第二个参数，表示第一个失败的 formItem</div>
                </td>
                <td>
                  <div>callback</div>
                </td>
              </tr>
              <tr>
                <td>
                  <div>reset</div>
                </td>
                <td>
                  <div>对表单进行重置，复原所有字段值，并清空校验结果</div>
                </td>
                <td>
                  <div>无</div>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
        <div class="anchor">
          <h3>FormItem props</h3>
        </div>
        <div class="r-table r-table-border api">
          <table>
            <thead>
              <tr>
                <th>
                  <div>属性</div>
                </th>
                <th>
                  <div>说明</div>
                </th>
                <th>
                  <div>类型</div>
                </th>
                <th>
                  <div>默认值</div>
                </th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>
                  <div>label</div>
                </td>
                <td>
                  <div>标签文本</div>
                </td>
                <td>
                  <div>Sring</div>
                </td>
                <td>
                  <div>-</div>
                </td>
              </tr>
              <tr>
                <td>
                  <div>prop</div>
                </td>
                <td>
                  <div>表单域 model 里的字段， 支持多级模式，比如 a.b.c</div>
                </td>
                <td>
                  <div>String</div>
                </td>
                <td>
                  <div>-</div>
                </td>
              </tr>
              <tr>
                <td>
                  <div>rules</div>
                </td>
                <td>
                  <div>表单验证规则</div>
                </td>
                <td>
                  <div>Array</div>
                </td>
                <td>
                  <div>-</div>
                </td>
              </tr>
              <tr>
                <td>
                  <div>required</div>
                </td>
                <td>
                  <div>是否必填，设置后会在 lable 前增加红色*</div>
                </td>
                <td>
                  <div>Boolean</div>
                </td>
                <td>
                  <div>false</div>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
        <div class="anchor">
          <h3>FormItem methods</h3>
        </div>
        <div class="r-table r-table-border api">
          <table>
            <thead>
              <tr>
                <th>
                  <div>方法名</div>
                </th>
                <th>
                  <div>说明</div>
                </th>
                <th>
                  <div>参数</div>
                </th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>
                  <div>validate</div>
                </td>
                <td>
                  <div>对表单进行校验，参数为校验完的回调，回调里 true 表示成功， false 表示失败</div>
                </td>
                <td>
                  <div>callback</div>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </r-app>
    <script>
      var cities = []
      for (var i=0; i<12; i++){
        cities.push({
          value: i,
          label: '北京' + i,
        })
      }
      
      vm = new Vue({
        el: '#app',
        watch: {
          'common.componentValue' () {
            location.href = this.common.componentValue + '.html'
          }
        },
        data () {
          return {
            common: {
              componentValue: '',
              activeMenu: '3-9',
              tab: '',
              tab2: ''
            },
            formItem: {
              input: '',
              select: '',
              radio: '',
              checkbox: [],
              switch: true,
              date: '',
              time: '',
              textarea: '',
              tels: {
                items: [{value:''}]
              },
              ajaxValue: '',
              images: [],
            },
            ruleValidate: {
              input: [
                {
                  validate: this.required,
                  msg: '输入不能为空'
                },
                {
                  validate: function (value, callback){
                    if (/^\d+$/.test(value)){
                      callback(true)
                    }
                    else {
                      callback(false, '请输入数字')
                    }
                  }
                }
              ],
              select: [
                {
                  validate: this.required,
                  msg: '选择不能为空'
                }
              ],
              radio: [
                {
                  validate: this.required,
                  msg: 'radio不能为空'
                }
              ],
              checkbox: [
                {
                  validate: this.required,
                  msg: 'checkbox不能为空'
                }
              ],
              date: [
                {
                  validate: this.required,
                  msg: 'date不能为空'
                }
              ],
              time: [
                {
                  validate: this.required,
                  msg: 'time不能为空',
                }
              ],
              ajaxValue: [
                {
                  validate (value, callback) {
                    if (value.trim().length === 0){
                      callback(false, '不能为空')
                      return
                    }
      
                    setTimeout(_=>{
                      if (value == 'ajax'){
                        callback(true)
                      }
                      else {
                        callback(false)
                      }
                    }, 1000)
                  },
                  msg: '远程验证失败',
                  loadingMsg: '请求ing....',
                }
              ],
              images: [
                {
                  validate: this.required,
                  msg: '图片不能为空'
                }
              ]
            }
          }
        },
        methods: {
          required (value, callback) {
            if (value instanceof Array){
              if (value.length > 0){
                callback(true)
              }
              else {
                callback(false)
              }
            }
            else {
              if (value.length > 0){
                callback(true)
              }
              else {
                callback(false)
              }
            }
            
          },
      
          addTel () {
            this.formItem.tels.items.push({
              value: ''
            })
          },
      
          delTel (item) {
            var idx = this.formItem.tels.items.indexOf(item)
            this.formItem.tels.items.splice(idx, 1)
          },
      
          submit () {
            console.log(JSON.stringify(this.formItem))
            this.$refs.myForm.validate( (_, item)=>{
              console.log(_, item)
            })
          },
      
          reset () {
            this.$refs.myForm.reset()
          },
      
          onSuccess (res, file) {
            this.formItem.images.push({
              name: file.name,
              url: res.id
            })
          }
        }
      })
    </script>
  </body>
</html>
<script>
  setTimeout(function (){
    var preNodes = document.getElementsByTagName('pre')
    for (var i=0, preNode, codeNode, textNode; i<preNodes.length; i++){
      preNode = preNodes[i]
      codeNode = preNode.querySelector('code')
      textNode = preNode.querySelector('textarea')
  
      codeNode.innerText = textNode.value.trim()
      hljs.highlightBlock(codeNode)
    }
  }, 100)
</script>